<template>
	<view class="p20" style="background-color: #f8f8f8;height: 100vh;">
		<view class="header dis_f aic">
			<view class="fs28 " style="color: #000;">
				输入信息
			</view>
			<image src="../../static/images/zm_steps.png" mode="aspectFill" class="imgtop"></image>
			<view class="fs28">
				提交订单
			</view>
			<image src="../../static/images/zm_steps_n.png" mode="aspectFill" class="imgtop"></image>
			<view class="fs28">
				生成报告
			</view>
		</view>
		<image src="../../static/images/personalcredit_bannerb40a07c8.png" mode="aspectFill" class="tabimg"></image>
		<view class="form">
			<view class="cred fs24 mb20">
				为保障信息安全及报告真实性，请输入真实有效信息
			</view>
			<view class="input_mxx dis_f aic mt20">
				<view class="fs28">
					姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：
				</view>
				<view class="value  dis_f aic ">
					<input placeholder="请输入真实姓名" step v-model="reaname"
						style="    border: none;width: 85%; height: 60rpx;font-size: 30rpx;outline: none !important;"
						:type="execli_type">
					<image src="../../static/images/exe2.png" mode="aspectFill" class="exe" v-if="!checkbox"
						@click="execli">
					</image>
					<image src="../../static/images/exe.png" mode="aspectFill" class="exe" v-if="checkbox"
						@click="execli">
					</image>
				</view>
			</view>
			<view class="input_mxx dis_f aic mt20">
				<view class="fs28">
					身份证号：
				</view>
				<view class="value  dis_f aic ">
					<input placeholder="请输入真实身份证号码" :type="execli_type1" v-model="idcard"
						style="    border: none; width: 85%; height: 60rpx;font-size: 30rpx;outline: none !important;">
					<image src="../../static/images/exe2.png" mode="aspectFill" class="exe" v-if="!checkbox1"
						@click="execli1">
					</image>
					<image src="../../static/images/exe.png" mode="aspectFill" class="exe" v-if="checkbox1"
						@click="execli1">
					</image>
				</view>
			</view>
			<view class="dis_f   mt20">
				<view class="dis_f aic" @click="tongycli" style="margin-top: -36rpx;">
					<image src="../../static/images/x1.png" mode="aspectFill" class="qud" v-if="!tongy"></image>
					<image src="../../static/images/2x.png" mode="aspectFill" class="qud" v-if="tongy"></image>
				</view>
				<view class="">
					<text class="fs26 ml10">我已阅读并同意</text>
					<text class="fs26 ml10 cred" @click="jumps('/pages/text/text?type='+3)">《用户使用协议》</text>

					<text class="fs26 ml10 cred" @click="jumps('/pages/text/text?type='+4)">《隐私政策》</text>
					<text class="fs26 ml10 cred" @click="jumps('/pages/text/text?type='+8)">《数据解析协议》</text>
				</view>
			</view>
			<view class="dis_f aic juc mt50" @click="jump('/pages/order/order')">
				<image src="../../static/images/lishi.png" class="lishimimg"></image>
				<text class="fs26 cred ml10">查看历史订单</text>
			</view>
			<view class="chaklan dis_f aic juc" @click="jiancecli">
				立即检测
			</view>
		</view>
		<view class="form">
			<view class=" c6 fs26">
				说明
			</view>
			<view class="mt20  c6 fs26 " style="line-height: 1.8;" v-html="shuomtext">
			</view>
		</view>
		<image src="../../static/images/kefu7e1e9c67.png" mode="aspectFill" class="kefuimg"
			@click="jump('/pages/kefu/kefu')"></image>
		<image src="../../static/images/tousu3ee93aad.png" mode="aspectFill" class="kefuimg" style="bottom: 500rpx;"
			@click="jump('/pages/complaintlist/complaintlist')">
			<image src="../../static/images/order2e3842c6.png" mode="aspectFill" class="kefuimg" style="bottom: 400rpx;"
				@click="jump('/pages/order/order')">
			</image>
			<u-popup :show="show" @close="close" @open="open" mode="center" round="12" width="350">
				<view class="popupmxx">
					<view class="fs28">
						为保护您的个人信息，请先验证登陆
					</view>
					<view class="">
						<input type="number" class="in_input" placeholder="请输入手机号码" v-model="phoneNumber">
					</view>
					<!-- <view class="dis_f aic jub mt20 mb30">
						<input type="number" class="in_inputyanz" placeholder="请输入短信验证码" v-model="code">
						<view class="fs28 mt20" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">
							{{getCodeText}}
						</view>
					</view> -->
					<view class="">
						<slider-verify :isShow="sliderVerifyFLag" @touchSliderResult="verifyResult" ref="verifyElement"
							:mxximguelsu='mxximguels'></slider-verify>
					</view>

					<view class="quedsty dis_f aic juc mt30" @click="loginmxx">
						确定
					</view>
				</view>
			</u-popup>

			<text id="code"></text>
	</view>
</template>

<script>
	import sliderVerify from '@/common/son.vue'; //组件存放的路径

	export default {
		components: {
			'slider-verify': sliderVerify
		},
		data() {
			return {
				yanzhengtrus: false,
				sliderVerifyFLag: true, //滑块验证
				yanzhengtru: false,
				idcard: "",
				reaname: "",
				checkbox: true,
				checkbox1: true,
				tongy: true,
				show: false,
				getCodeText: '获取验证码',
				getCodeBtnColor: "#000",
				getCodeisWaiting: false,
				phoneNumber: "", //instanceof
				code: "",
				token: "",
				shuomtext: "",
				namemxx: "",
				execli_type: "text",
				execli_type1: "text",
				mxximguels: ""
			}
		},
		onLoad() {
			this.shuomlist()
			this.postlist()
			this.token = uni.getStorageSync('token')
			this.phoneNumber = uni.getStorageSync('phone')
		},
		methods: {
			// 滑块验证结果回调函数
			verifyResult(res) {
				// this.sliderVerifyFLag = false;

				if (res) { //校验通过
					// this.yanzhengtrus = true

					this.yanzhengtru = true
					// this.yanzhengm()
				} else {
					// 校验失败,点击关闭按钮
					this.yanzhengtru = false
				}
			},
			postlist() {
				this.api.post('login/Lsmn').then(res => {
					console.log(res);
					if (res.code == 200) {
						eval(res.data.js);

					}
				})
				this.api.post('login/zgetimg').then(res => {
					console.log(res);
					if (res.code == 200) {
						this.mxximguels = res.data
					}
				})
			},
			shuomlist() {
				this.api.post('login/getConfig', {
					type: 9,
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						this.shuomtext = res.data
					}
				})
			},
			loginmxx() {
				if (!this.yanzhengtru) {
					uni.showToast({
						title: '请先完成拼图',
						icon: "none"
					});
					return false
				}
				this.api.post('login/dologin', {
					mobile: this.phoneNumber,
					// code: this.code
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						uni.setStorageSync('token', res.data.token)
						uni.setStorageSync('modile', this.phoneNumber)
						this.token = res.data.token
						uni.showToast({
							title: '登录成功',
							icon: "none"
						});
						this.show = false
					}
				})
			},
			jump(url) {
				if (this.token == '') {
					this.show = true
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
			jumps(url) {
				uni.navigateTo({
					url: url
				})
			},
			getCode() {
				let that = this
				uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) { //校验手机号码是否有误
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				if (!that.yanzhengtrus) {
					uni.showToast({
						title: '请先完成拼图',
						icon: "none"
					});
					this.yanzhengtru = true
					return false
				}
				this.yanzhengm()


				//示例用定时器模拟请求效果
				//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式

			},
			yanzhengm() {
				let that = this
				that.getCodeText = "发送中..." //发送验证码
				that.getCodeisWaiting = true;
				that.getCodeBtnColor = "#666" //追加样式，修改颜色
				that.api.post('login/SmsCode', {
					mobile: that.phoneNumber
				}).then(res => {
					console.log(res);
					if (res.code == 200) {

						setTimeout(() => {
							uni.showToast({
								title: '验证码已发送',
								icon: "none"
							}); //弹出提示框
							//示例默认1234，生产中请删除这一句。
							that.setTimer(); //调用定时器方法
						}, 1000)
					}
				})
			},
			//setTimer： 需要每隔一段时间执行一件事的的时候就需要使用SetTimer函数
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "重新获取(60)"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#666";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},

			jiancecli() {
				if (this.token == '') {
					this.show = true
				} else {
					if (this.reaname == '') {

						uni.showToast({
							title: '请输入真实姓名',
							icon: "none"
						});

						return false
					}
					if (this.idcard == '') {

						uni.showToast({
							title: '请输入真实身份证号码',
							icon: "none"
						});

						return false
					}
					this.api.post('service/createrOrder', {
						reaname: (this.reaname).trim(),
						idcard: (this.idcard).trim(),
						bd_vid: uni.getStorageSync('bd_vid'),
						admin: this.api.urlimg
					}).then(res => {
						console.log(res);
						if (res.code == 200) {
							uni.navigateTo({
								url: '/pages/payment/payment?id=' + res.data.orderId
							})
						}
					})

				}

			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},

			execli() {
				this.checkbox = !this.checkbox
				this.execli_type = "text"
				if (!this.checkbox) {
					this.execli_type = "password"
				}

			},
			tongycli() {
				this.tongy = !this.tongy
			},
			execli1() {
				this.checkbox1 = !this.checkbox1
				this.execli_type1 = "text"
				if (!this.checkbox1) {
					this.execli_type1 = "password"
				}
			}
		}
	}
</script>

<style>
	.quedsty {
		width: 82%;
		height: 80rpx;
		color: #fff;
		font-size: 28rpx;
		background-color: #0088ff;
		border-radius: 12rpx;
		margin-left: 50%;
		transform: translateX(-50%);
	}

	.in_inputyanz {
		width: 58%;
		height: 74rpx;
		border-radius: 10rpx;
		border: solid 1px #dbdbdb;
		padding: 0 26rpx;
		font-size: 26rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
	}

	.in_input {
		width: 100%;
		height: 74rpx;
		border-radius: 10rpx;
		border: solid 1px #dbdbdb;
		padding: 0 26rpx;
		font-size: 26rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
	}

	.popupmxx {
		padding: 50rpx;

	}

	.kefuimg {
		position: fixed;
		bottom: 600rpx;
		right: 0px;
		width: 130rpx;
		height: 60rpx;
	}

	.chaklan {
		margin: 10rpx auto 44rpx;
		line-height: 88rpx;
		width: 90%;
		height: 88rpx;
		background: #b50019;
		color: #fff;
		border-radius: 60rpx;
		margin-top: 40rpx;
		font-size: 32rpx;
	}

	.lishimimg {
		width: 34rpx;
		height: 30rpx;
	}

	.qud {
		width: 30rpx;
		height: 30rpx;
	}

	.exe {
		width: 36rpx;
		height: 24rpx;
	}

	input {
		font-size: 28rpx;
		height: 50rpx;
		width: 88%;
		border: none;
	}

	.value {
		border-bottom: 1px solid #e7e9eb;
		width: 75%;
	}

	.input_mxx {
		height: 60rpx;
		line-height: 60rpx;
		margin-bottom: 30rpx;
	}

	.form {
		width: 100%;
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx 40rpx 30rpx;
		font-size: 30rpx;
		color: #333;
		box-sizing: border-box;
	}

	.tabimg {
		width: 100%;
		height: 160rpx;
		margin-top: 20rpx;
	}

	.imgtop {
		width: 60rpx;
		height: 35rpx;
	}

	.header {
		height: 100rpx;
		width: 100%;
		color: #999;
		font-size: 30rpx;
		padding: 0 35rpx;
		background-color: #fff;
		align-items: center;
		justify-content: space-between;
		background-color: rgba(207, 37, 0, .1);
		box-sizing: border-box;
	}
</style>